<template>
  <view class="ai-chat-container">
    <!-- 顶部状态栏占位 -->
    <view :style="{height: statusBarHeight + 'px'}"></view>
    <!-- 顶部导航栏 --> 
    <!-- 默认页 -->
    <view v-if="!showChat" class="chat-default-page">
      <view class="default-content">
        <!-- 搜索框区域 -->
        <view class="integrated-input-section">
          <view class="input-row">
            <textarea
              v-model="inputText"
              class="bottom-input"
              :placeholder="inputFocused ? '' : '有什么问题尽管问我'"
              confirm-type="done"
              @confirm="sendMessage"
              :disabled="loading"
              caret-color="#19c59c"
              ref="inputRef"
              @focus="onInputFocus"
              @blur="onInputBlur"
              @input="adjustHeight"
              :style="{ height: textareaHeight + 'px' }"
              auto-height
            />
            <view class="input-buttons-container">
              <view class="input-attach-btn" @click="chooseFile">
                <image class="input-attach-img" src="/static/fj.png" mode="aspectFit" />
              </view>
              <view class="input-send-btn" @click="canSend && sendMessage()">
                <image
                  class="input-status-img"
                  :src="canSend ? '/static/fs1.png' : '/static/fs1.png'"
                  mode="aspectFit"
                />
              </view>
            </view>
          </view>
          <view class="tools-row">
            <view v-if="attachments.length" class="input-attachments-list">
              <view v-for="(file, idx) in attachments" :key="'att-'+idx" class="input-attachment-item">
                <template v-if="file.type==='image'">
                  <image class="input-attachment-img" :src="file.path" mode="aspectFill" />
                </template>
                <template v-else>
                  <image class="input-attachment-img" src="/static/fj.png" mode="aspectFit" />
                </template>
                <view class="input-attachment-overlay" @click.stop="removeAttachment(idx)">
                  <text class="input-attachment-close">✕</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 功能入口区域 -->
        <view class="features-container">
          <view class="features-row">
            <view class="feature-item" v-for="(feature, index) in features" :key="index" @click="handleFeatureClick(feature)">
              <image class="feature-icon" :src="feature.icon" mode="aspectFit" />
              <text class="feature-text">{{ feature.name }}</text>
            </view>
          </view>
        </view>

      </view>
    </view>

    <!-- 聊天内容区和底部输入框已移除，这是一个纯粹的入口页面 -->

    <!-- 底部Tab栏（可复用首页） -->
    <view class="tabbar">
      <view v-for="(item, index) in tabbar" :key="index" class="tab" :class="{ active: activeTab === index }" @click="changeTab(index)">
        <image class="tab-icon" :src="activeTab === index ? item.selectedIconPath : item.iconPath"></image>
        <text class="tab-label">{{ item.text }}</text>
      </view>
    </view>


  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      inputText: '',
      tabbar: [
        {
          text: '找工作',
          iconPath: '/static/zhaogongzuo0.png',
          selectedIconPath: '/static/zhaogongzuo1.png'
        },
        {
          text: 'AI面试',
          iconPath: '/static/lianmianshi0.png',
          selectedIconPath: '/static/lianmianshi1.png'
        },
        {
          text: '我的',
          iconPath: '/static/wode0.png',
          selectedIconPath: '/static/wode1.png'
        }
      ],
      // 功能入口数据
      features: [
        { name: '简历优化', icon: '/static/jlyh.png' },
        { name: 'Ai面试', icon: '/static/aims.png' },
        { name: 'Ai求职', icon: '/static/aiqz.png' },
        { name: '职业规划', icon: '/static/zygh.png' },
        { name: '求职交流', icon: '/static/qzjl.png' },
        { name: '面试官', icon: '/static/msg1.png' }
      ],
      activeTab: 1,
      fromPage: 'home',
      loading: false,
      attachments: [],
      uploadingFiles: [],
      inputFocused: false,
      textareaHeight: 80
    }
  },
  computed: {
    canSend() {
      return (this.inputText && this.inputText.trim().length > 0) || this.attachments.length > 0
    }
  },
  onLoad(options) {
    const sys = uni.getSystemInfoSync();
    const safeTop = (sys.safeAreaInsets && sys.safeAreaInsets.top) || (sys.safeArea && sys.safeArea.top) || sys.statusBarHeight || 0;
    this.statusBarHeight = safeTop;
    // 记录来源页面
    if (options && options.from) {
      this.fromPage = options.from;
    }
  },
  methods: {
    changeTab(index) {
      this.activeTab = index;
      if (index === 0) {
        // 找工作tab，根据来源跳转
        if (this.fromPage === 'company') {
          uni.redirectTo({ url: '/pages/home/index2' });
        } else {
          uni.redirectTo({ url: '/pages/home/index' });
        }
      } else if (index === 1) {
        // 当前页
      } else if (index === 2) {
        uni.redirectTo({ url: `/pages/index/my?from=${this.fromPage}` });
      }
    },
    // 处理功能入口点击
    handleFeatureClick(feature) {
      console.log('点击功能:', feature.name);
      switch (feature.name) {
        case '简历优化':
          uni.navigateTo({
            url: '/pages/ai-chat/resume-optimization'
          });
          break;
        case 'Ai面试':
          uni.navigateTo({
            url: '/pages/ai-chat/ai-interview'
          });
          break;
        case 'Ai求职':
          uni.navigateTo({
            url: '/pages/ai-chat/ai-job-search'
          });
          break;
        case '职业规划':
          uni.navigateTo({
            url: '/pages/ai-chat/career-planning'
          });
          break;
        case '求职交流':
        case '面试官':
          uni.navigateTo({
            url: '/pages/assistant/index'
          });
          break;
        default:
          uni.showToast({
            title: `即将跳转到${feature.name}功能`,
            icon: 'none'
          });
      }
    },
    async sendMessage() {
      if ((!this.canSend && this.attachments.length===0) || this.loading) return;
      
      // 直接跳转到ai-chat/index2页面，并传递消息内容
      const messageData = {
        inputText: this.inputText || '',
        attachments: this.attachments || [],
        timestamp: Date.now()
      };
      
      // 将消息数据存储到本地，供index2页面使用
      uni.setStorageSync('pendingMessage', messageData);
      
      // 跳转到ai-chat/index2页面
      uni.redirectTo({
        url: '/pages/ai-chat/index2?fromChat=true'
      });
    },
    chooseFile() {
      const that = this;
      uni.showActionSheet({
        itemList: ['图片', '文档'],
        success(res) {
          if (res.tapIndex === 0) {
            // 选择图片
            uni.chooseImage({
              count: 9,
              success(imgRes) {
                imgRes.tempFiles.forEach(file => {
                  that.handleAttachment({
                    type: 'image',
                    name: file.name || '图片',
                    path: file.path
                  });
                });
                // 上传完成后直接发送
                setTimeout(() => {
                  that.sendMessage();
                }, 500);
              }
            });
          } else if (res.tapIndex === 1) {
            // 选择文档
            // #ifdef H5
            if (typeof window !== 'undefined') {
              that.$refs.h5FileInput.value = '';
              that.$refs.h5FileInput.click();
              return;
            }
            // #endif
            uni.chooseMessageFile({
              count: 9,
              type: 'file',
              success(fileRes) {
                fileRes.tempFiles.forEach(file => {
                  that.handleAttachment({
                    type: 'file',
                    name: file.name,
                    path: file.path
                  });
                });
                // 上传完成后直接发送
                setTimeout(() => {
                  that.sendMessage();
                }, 500);
              }
            });
          }
        }
      });
    },
    onH5FileChange(e) {
      const files = e.target.files;
      if (!files || !files.length) return;
      Array.from(files).forEach(file => {
        this.handleAttachment({
          type: 'file',
          name: file.name,
          path: '',
          fileObj: file
        });
      });
    },
    async handleAttachment(file) {
      // 若已达到最大数量，提示并返回
      const MAX_ATTACHMENTS = 5;
      if (this.attachments.length >= MAX_ATTACHMENTS) {
        uni.showToast({ title: `至多支持上传${MAX_ATTACHMENTS}个附件`, icon: 'none' });
        return;
      }
      // 预留上传/接口逻辑
      // 可在此处上传文件到服务器，获取url后再推送到消息流
      // 上传进度模拟/预留
      const uploadItem = { name: file.name, progress: 0 };
      this.uploadingFiles.push(uploadItem);
      const simulate = setInterval(() => {
        if (uploadItem.progress < 100) {
          uploadItem.progress += 10;
        } else {
          clearInterval(simulate);
          // 上传完成，加入输入框附件区
          this.attachments.push(file);
          // 移除进度条
          this.uploadingFiles = this.uploadingFiles.filter(f => f !== uploadItem);
        }
      }, 120);
    },
    removeAttachment(idx) {
      this.attachments.splice(idx, 1);
    },
    onInputFocus() {
      this.inputFocused = true
    },
    onInputBlur() {
      this.inputFocused = false
    },
    adjustHeight(e) {
      // 使用事件返回的高度或元素scrollHeight实现自适应
      const h = e.detail && e.detail.height ? e.detail.height : 40;
      const maxHeight = 120;
      this.textareaHeight = Math.min(maxHeight, h);
    }
  }
}
</script>

<style scoped>
@keyframes fadeInBubble {
  from {
    opacity: 0;
    transform: translateY(20rpx) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-18rpx); }
  100% { transform: translateY(0); }
}
@keyframes breathe {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.chat-default-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100vh !important;
  width: 100%;
  padding: 0;
  padding-top: 20vh;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.default-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: calc(100vw - 60rpx);
  /* 去除白色背景，使用透明背景 */
  background: transparent;
  border-radius: 24rpx;
  /* 去除所有阴影效果 */
  box-shadow: none;
  /* 去除背景模糊效果 */
  backdrop-filter: none;
  /* 去除边框，更简洁 */
  border: none;
  padding: 40rpx 36rpx 28rpx;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}
/* 移除复杂装饰效果 */
.default-content::before {
  display: none;
}
/* 移除内部光效 */
.default-content::after {
  display: none;
}
.default-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24rpx;
  margin-bottom: 32rpx;
  width: 100%;
}
.default-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24rpx;
  margin-bottom: 32rpx;
  width: 100%;
}
.integrated-input-section {
  width: calc(100vw - 60rpx);
  /* 与页面背景完全融合 */
  background: transparent;
  border-radius: 16rpx;
  padding: 16rpx;
  /* 去除边框 */
  border: none;
  transition: all 0.2s ease;
  position: relative;
}
/* 移除输入框装饰 */
.integrated-input-section::before {
  display: none;
}
.integrated-input-section:focus-within {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.logo-wave-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120rpx;
  width: 120rpx;
  margin-bottom: 32rpx;
}
.logo-wave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120rpx;
  height: 120rpx;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(25,197,156,0.18);
  animation: wavePulse 2.2s infinite;
  z-index: 0;
}
.logo-wave2 {
  animation-delay: 0.5s;
}
.logo-wave3 {
  animation-delay: 1s;
}
@keyframes wavePulse {
  0% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1);
  }
  70% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(1.7);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2);
  }
}
.default-logo {
  position: relative;
  z-index: 1;
  height: 72rpx;
  width: 72rpx;
  border-radius: 50%;
  /* 简洁的纯色背景 */
  background: #19c59c;
  /* 去除复杂动画 */
  animation: none;
  /* 简洁的阴影 */
  box-shadow: 0 2rpx 8rpx rgba(25, 197, 156, 0.15);
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
/* 移除logo复杂装饰 */
.default-logo::before {
  display: none;
}
.default-text-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 6rpx;
  flex: 1;
}
.default-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #1a202c;
  margin: 0;
  letter-spacing: 0.3rpx;
}
.default-desc {
  font-size: 22rpx;
  color: #718096;
  line-height: 1.4;
  margin: 0;
  font-weight: 400;
  opacity: 0.75;
}
.ai-chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh !important;
  overflow: hidden;
  /* 添加与找工作页面一致的背景渐变 */
  background: linear-gradient(
    180deg,
    #F0FDF8 0%,      /* 顶部非常浅的青绿色，几乎是白色 */
    #E6FAF5 20%,      /* 稍微深一点的浅青绿色 */
    #D0F0EE 50%,      /* 中间的柔和青绿色 */
    #E8F5E4 80%,      /* 再次变浅，偏黄的浅绿色 */
    #F8FBF8 95%,      /* 接近纯白色的极浅绿 */
    #FFFFFF 100%     /* 纯白，确保与卡片区域完美衔接 */
  );
  position: relative;
}
/* 移除背景装饰元素 */
.ai-chat-container::before {
  display: none;
}
.ai-chat-container::after {
  display: none;
}
.chat-header {
  flex-direction: row;
  place-items: center;
  display: flex;
  align-items: center;
  height: 100rpx;
  background: transparent;
  padding-left: 16px;
  padding-right: 32rpx;
  position: relative;
  margin-top: 60px;
  margin-right: auto;
}
.salary-location-row{
	flex-direction: row;
	place-items: center;
}

.back-btn {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  backdrop-filter: blur(15px);
  border: 2rpx solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  margin-right: 16rpx;
}

.back-btn:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}
.back-arrow {
  font-size: 44rpx;
  color: #fff;
  font-weight: bold;
  line-height: 1;
  display: block;
  text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.18);
}
.chat-title-img {
  height: 50rpx;
  width: auto;
  display: block;
}
.chat-content {
  flex: 1;
  margin: 0 18rpx;
  border-radius: 24rpx;
  padding: 0rpx 24rpx 0 24rpx;
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 400rpx; /* 调整底部间距，避免内容被输入框遮挡 */
}
.messages-container {
  padding-bottom: 1rpx; /* 输入区+tabbar+安全间距 */
}
.msg-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-bottom: 40rpx;
}
.msg-row.user {
  flex-direction: row-reverse;
}
.msg-row.ai {
  flex-direction: row;
}
.msg-bubble {
  max-width: 75vw;
  padding: 28rpx 36rpx;
  font-size: 30rpx;
  line-height: 1.7;
  word-break: break-all;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
  border: 1.5rpx solid transparent;
  backdrop-filter: blur(2px);
  animation: fadeInBubble 0.5s cubic-bezier(.39,.58,.57,1.15);
  margin-bottom: 0;
  position: relative;
}
.msg-bubble.user {
  background: #fff;
  color: #222;
  border: 1.5rpx;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.07);
  border-radius:40rpx;
  border-bottom-right-radius: 6rpx;
}
.msg-bubble.ai {
  background: linear-gradient(135deg, #e6faf5 60%, #eafcff 100%);
  color: #17446e;
  border: 1.5rpx;
  box-shadow: 0 2rpx 6rpx rgba(110,244,204,0.10);
    border-radius:40rpx;
  border-top-left-radius: 6rpx;
}
.quick-suggest-row,
.quick-suggest-scroll,
.quick-suggest-item {
  display: none !important;
}
.chat-input-row {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.85);
  padding: 16rpx 24rpx 32rpx 24rpx;
  border-top: 1rpx solid #e0f7fa;
  backdrop-filter: blur(6px);
}
.chat-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 28rpx;
  background: #f7f8fa;
  border-radius: 24rpx;
  padding: 16rpx 24rpx;
  margin-right: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(15,211,255,0.08);
  border: 1rpx solid #e0f7fa;
}
.send-btn {
  background: linear-gradient(90deg, #00b386 0%, #0fd3ff 100%);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 0 28px;
  height: 40px;
  font-size: 16px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15,211,255,0.08);
  transition: transform 0.15s cubic-bezier(.39,.58,.57,1.15);
}
.send-btn:active {
  transform: scale(0.95);
}
.tabbar {
  margin-bottom: 0rpx;
  flex-direction: row;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16rpx;
  height: 112rpx;
  background: rgba(255,255,255,0.72);
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* 更强的悬浮阴影效果 */
  box-shadow: 0 12rpx 36rpx 0 rgba(0,0,0,0.18), 0 2rpx 8rpx 0 rgba(0,0,0,0.08);
  border-radius: 24rpx;
  margin-left: 18rpx;
  margin-right: 18rpx;
  width: calc(100vw - 36rpx);
  backdrop-filter: blur(18px);
  z-index: 999;
  border: none;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #888;
  font-size: 22rpx;
  flex: 1;
  justify-content: center;
  padding: 0;
  gap: 4rpx;
}
.tab.active {
  color: #00b386;
}
.tab-icon {
  width: 44rpx;
  height: 44rpx;
  margin-bottom: 0;
}
.tab-label {
  font-size: 20rpx;
  margin-top: 0;
}
.bottom-input-bar {
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: auto;
  background: transparent;
  position: fixed;
  left: 0;
  right: 0;
  top: 55vh; /* 调整到更合适的位置 */
  z-index: 9999;
  transform: translateZ(0);
  padding: 0 24rpx;
}
.bottom-input-wrap {
  flex-direction: column;
  width: 100%;
  max-width: 600rpx;
  background: rgba(255, 255, 255, 0.95);
  border: 2rpx solid rgba(25, 197, 156, 0.2);
  border-radius: 24rpx;
  box-shadow: 0 12rpx 40rpx rgba(25, 197, 156, 0.12), 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  z-index: 9999;
  display: flex;
  align-items: stretch;
  padding: 20rpx 24rpx;
  position: relative;
  transform: translateZ(0);
  backdrop-filter: blur(20px);
  transition: all 0.3s ease;
}
.bottom-input-wrap:hover {
  border-color: rgba(25, 197, 156, 0.4);
  box-shadow: 0 16rpx 48rpx rgba(25, 197, 156, 0.16), 0 6rpx 16rpx rgba(0, 0, 0, 0.1);
}
.bottom-input-wrap::before {
  content: '';
  position: absolute;
  top: -1rpx;
  left: -1rpx;
  right: -1rpx;
  bottom: -1rpx;
  background: linear-gradient(135deg, rgba(25, 197, 156, 0.1) 0%, rgba(72, 187, 120, 0.05) 100%);
  border-radius: 24rpx;
  z-index: -1;
}
.input-row {
  flex-direction: row;
  place-items: center;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 140px;
  height: auto;
  position: relative;
  /* 恢复白色背景 */
  background: #ffffff;
  border-radius: 12rpx;
  padding: 18rpx 20rpx;
  /* 去除边框 */
  border: none;
  transition: all 0.2s ease;
}

.input-buttons-container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 16rpx;
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
}
.tools-row {
  flex-direction: row;
  display: flex;
  align-items: center;
  padding-top: 10rpx;
  margin-top: 10rpx;
  /* 去除顶部边框 */
  border-top: none;
  gap: 20rpx;
  justify-content: flex-start;
}
.input-attach-btn, .input-send-btn {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: all 0.2s ease;
  border-radius: 32rpx;
  background: transparent;
}
.input-attach-btn:active, .input-send-btn:active {
  opacity: 1;
  background: transparent;
  transform: none;
}
.input-send-btn {
  opacity: 1;
  box-shadow: none;
}
.input-send-btn:active {
  box-shadow: none;
  background: transparent;
  transform: none;
}

.input-attach-img {
  width: 48rpx;
  height: 48rpx;
  opacity: 1;
}
.input-status-img {
  width: 48rpx;
  height: 48rpx;
}
.input-attachments-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  flex-direction: row;
  max-width: 60vw;
  overflow-x: auto;
  flex: 1;
}
.input-attachment-item {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  overflow: hidden;
}
.input-attachment-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.input-attachment-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-attachment-close {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}
.bottom-input {
  width: 100%;
  padding: 32rpx 100rpx 32rpx 28rpx;
  resize: none;
  min-height: 100px;
  max-height: 220px;
  transition: height 0.2s ease;
  line-height: 1.5;
  font-size: 16px;
  border: none;
  outline: none;
  color: #2d3748;
  word-break: break-all;
  white-space: pre-wrap;
  background: transparent;
  font-weight: 400;
}
.msg-copy-row {
  display: flex;
  margin-top: 12rpx; /* 增加气泡与复制按钮间距 */
}
.msg-copy-row.ai {
  justify-content: flex-start;
}
.msg-copy-icon {
  width: 28rpx;
  height: 28rpx;
  opacity: 0.7;
}
.msg-copy-icon:active { opacity:1; }
.msg-image {
  max-width: 480rpx;
  max-height: 320rpx;
  border-radius: 8rpx;
  cursor: pointer;
}
.header-icons {
  flex-direction: row;
  position: absolute;
  right: 8rpx;
  transform: translateY(-50%);
  gap: 30rpx;
  margin-right: 10rpx;
  margin-top: 170rpx;
  padding: 6px;
}
.header-icon {
  width: 50rpx;
  height: 50rpx;
  opacity: 0.9;
}
.header-icon:active { opacity:1; }
.history-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 2000;
  display: flex;
  justify-content: flex-end;
}
.history-drawer {
  width: 70vw;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 12px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}
.history-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 1px solid #eee;
}
.history-title { font-size: 32rpx; font-weight: bold; }
.history-list { flex: 1; padding: 24rpx; }
.history-date { font-size: 26rpx; color: #666; margin-bottom: 12rpx; display:block; }
.history-item { padding: 16rpx 0; border-bottom: 1px solid #f0f0f0; }
.history-item-title { font-size: 28rpx; color: #333; }
.thinking-line {
  color: #888;
  font-size: 28rpx;
  margin: 0 12rpx 40rpx;
}

.features-container {
  width: 100%;
  max-width: calc(100vw - 60rpx);
  margin-top: 32rpx;
}

.features-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  width: 100%;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.feature-item:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.feature-icon {
  width: 90rpx;
  height: 90rpx;
  margin-bottom: 12rpx;
}

.feature-text {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}

</style>

